<template>
	<view class="loading" style="position: relative; width: 750rpx;height: 100vh;text-align: center;" v-if="isLoading">
		<view class="text position-center" style="width: 750rpx;">
			{{ loadingTitle }}
		</view>
	</view>
	<view class="product-details product-details-index" v-else>
		<swiper style="width: 750rpx;height: 300px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item style="width: 100%;height: 100%;"> 
				<!-- 图片 -->
				<view class="image swiper-item" style="width: 750rpx;height: 300px;position: relative;">
					<view class="index" v-if="info.productType==1"
						  style="position: absolute;left: 20px;top: 20px;
								 width: 50px;height: 30px;background-color: #3337;
								 text-align: center;line-height: 30px;border-radius: 5px;
								 color: white;backdrop-filter: blur(15px);">
						1 / 4
					</view>
					<image :src="baseUrl+info.productImage" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item v-if="info.productType==1" style="width: 100%;height: 100%;">
				<!-- 图片 -->
				<view class="image swiper-item" style="width: 750rpx;height: 300px;position: relative;">
					<view class="index" 
						  style="position: absolute;left: 20px;top: 20px;
								 width: 50px;height: 30px;background-color: #3337;
								 text-align: center;line-height: 30px;border-radius: 5px;
								 color: white;backdrop-filter: blur(15px);">
						2 / 4
					</view>
					<image :src="baseUrl+info.sceneImage1" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item v-if="info.productType==1" style="width: 100%;height: 100%;">
				<!-- 图片 -->
				<view class="image swiper-item" style="width: 750rpx;height: 300px;position: relative;">
					<view class="index"
						  style="position: absolute;left: 20px;top: 20px;
								 width: 50px;height: 30px;background-color: #3337;
								 text-align: center;line-height: 30px;border-radius: 5px;
								 color: white;backdrop-filter: blur(15px);">
						3 / 4
					</view>
					<image :src="baseUrl+info.sceneImage2" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item v-if="info.productType==1" style="width: 100%;height: 100%;">
				<!-- 图片 -->
				<view class="image swiper-item" style="width: 750rpx;height: 300px;position: relative;">
					<view class="index"
						  style="position: absolute;left: 20px;top: 20px;
								 width: 50px;height: 30px;background-color: #3337;
								 text-align: center;line-height: 30px;border-radius: 5px;
								 color: white;backdrop-filter: blur(15px);">
						4 / 4
					</view>
					<image :src="baseUrl+info.detailImage" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- <view class="video" style="width: 750rpx;height: 200px;">
			<video 
				src="http://vd3.bdstatic.com/mda-mc4jeirqea3zubr7/fhd/cae_h264_nowatermark/1615159122/mda-mc4jeirqea3zubr7.mp4"
				style="width: 100%;height: 100%;">
			</video>
		</view> -->
		<!-- 内容 -->
		<view class="product-info flex-column-around" style="width: 750rpx;height: 160px;padding: 0 25rpx;align-items: start;box-sizing: border-box;">
			<view class="product-price flex-row" style="width: 100%;">
				<text style="color: red;font-weight: bold;">
					￥<text style="font-size: 20px;">{{info.productPrice}}</text>
				</text>
				<button open-type="share" style="background-color: rgba(0, 0, 0, 0);border: 0px;">
					分享
					<uni-icons
						id="in" 
						type="redo" 
						size="20"
						@click="share"></uni-icons>
				</button>
				<view>
					<label for="in" v-if="!isCollect">
						收藏
						<uni-icons 
							id="in" 
							type="star" 
							size="20"
							@click="changeCollect(true)"></uni-icons>
					</label>
					<label for="out" v-if="isCollect">
						取消收藏
						<uni-icons 
							id="out" 
							type="star-filled" 
							size="20"
							@click="changeCollect(false)"></uni-icons>
					</label>
				</view>
			</view>
			<view class="product-name" style="width: 700rpx;">
				<text style="font-weight: bold;">{{info.productName}}</text>
			</view>
			<view v-if="info.material" class="product-desc flex-row" style="width: 700rpx;">
				<view class="label" style="width: 10%;font-weight: bold;">材质</view>
				<view class="context" style="width: 85%;color: #666;">
					{{getMaterial(info.material)}}
				</view>
			</view>
			<view v-if="info.color" class="product-desc flex-row" style="width: 700rpx;">
				<view class="label" style="width: 10%;font-weight: bold;">颜色</view>
				<view class="context" style="width: 85%;color: #666;">
					{{getColor(info.color)}}
				</view>
			</view>
			<view class="product-desc flex-row" style="width: 700rpx;">
				<view class="label" style="width: 10%;font-weight: bold;">介绍</view>
				<view class="context" style="width: 85%;color: #666;">
					{{info.productDesc}}
				</view>
			</view>
		</view>
		<view v-if="info.productType=='1'" class="nums flex-row-center" style="justify-content: start;margin-left: 25rpx;">
			数量
			<uni-number-box 
				style="margin-left: 10px;"
				v-model="nums" 
				@change="changeValue"
				:min="1"/>
		</view>
		
		<view v-if="info.productType==2" class="image" style="width: 750rpx;height: 200px;">
	<!-- 		<video id="productVideo"
				   @play="onVideoPlay"
				   @timeupdate="onTimeUpdate"
				   controls
				   :src="baseUrl+info.productUrl"
				   style="width: 100%;height: 100%;">
			</video> -->
			<video class="livePlayer"
				:src="baseUrl+info.productUrl"
				:muted="false"
				:loop="true"
				:controls="true"
				style="width: 100%;height: 100%;">
			</video>
		</view>
		
		<!-- 布局所需 -->
		<view class="nothing"></view>
		<!-- 底部按钮 -->
		<view class="bottom flex-row-around">
			<view @click="goOrder(1)" class="buy-button">
				<text>结算</text>
			</view>
			<view @click="goOrder(2)" class="buy-button">
				<text>购买</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { BASE_IMAGE_URL, GET_USER_INFO } from '/utils/CommonValues.js';
	import request from '../../../utils/request';
	export default {
		data() {
			return {
				colorList: [],
				materialList: [],
				userInfo: {},
				isCollect: false, // 默认没有收藏
				loadingTitle: '加载中...',
				baseUrl: '',
				productsId: '',
				nums: 1,
				info: {
					advMembersId: '',
				},
				isLoading: false,
				collectInfo: {}, // 收藏信息
			}
		},
		onShow() {
			GET_USER_INFO().then(response => {
				console.log("在onShow中获取数据")
				this.userInfo = response;
			})
		},
		onLoad(option) {
			this.baseUrl = BASE_IMAGE_URL;
			this.productsId = option.id;
			this.toggle();
			this.getProductInfo();
			GET_USER_INFO().then(response => {
				this.userInfo = response;
				this.getCllect();
			})
		},
		onShareAppMessage(res) {
		    // 构建分享参数
		    let params = {
		      id: this.info.advProductsId,
		    };
		    // 将参数转换为查询字符串
		    let query = Object.keys(params)
		      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
		      .join('&');
		    
		    // 返回自定义分享内容
		    return {
		        title: this.info.productName,
		      	path: `/pages/product/productDetails/productDetails?${query}`,
		    };
		},
		methods: {
			getColor(value) {
				if(!value) {
					return;
				}
				var v = this.colorList.filter(item => {
					console.log("颜色",item.dictValue, value)
					if(item.dictValue == value) {
						return item;
					} 
				})
				return v[0].dictLabel;
			},
			getMaterial(value) {
				if(!value) {
					return;
				}
				var v = this.materialList.filter(item => {
					console.log("材质",item.dictValue, value)
					if(item.dictValue == value) {
						return item;
					} 
				})
				return v[0].dictLabel;
			},
			toggle(type) {
				request.GET(`/system/products/findcolor`, null)
					   .then(response => {
						   console.log("颜色信息", response)
						   this.colorList = response.data
						   request.GET(`/system/products/findmaterail`, null)
						   	   .then(response => {
						   		   console.log("材质信息", response)
						   		   this.materialList = response.data
						   	   })
					   })
			},
			onVideoPlay(e) {
				const context = uni.createVideoContext('productVideo', this);
				if(this.currentTime >= 15) {
					// context.seek(0)
					// uni.showToast({
					// 	title: '试看结束, 如需播放全部内容, 请先购买',
					// 	icon: 'none'
					// })
				}
			},
			onTimeUpdate(e) {
				const context = uni.createVideoContext('productVideo', this);
			    // 获取当前播放时间
			    this.currentTime = e.target.currentTime;
			    e.detail.currentTime = 10;
				if(this.currentTime >= 15) {
					// context.seek(0)
					// context.pause();
					// uni.showToast({
					// 	title: '试看结束, 如需播放全部内容, 请先购买',
					// 	icon: 'none'
					// })
				}
			},
			// 获取收藏信息
			getCllect() {
				request.GET('/system/collect/list', {
					advMembersId: this.userInfo.advMembersId,
					advProductsId: this.productsId
				}).then(response => {
					console.log("收藏信息");
					if(response.code == 200) {
						if(response.rows.length != 0) {
							this.isCollect = true;
							this.collectInfo = response.rows[0];
						}
					}
				})
			},
			changeCollect(value){
				if(value) {
					// 表示点击了收藏
					request.POST('/system/collect', {
						advMembersId: this.userInfo.advMembersId,
						advProductsId: this.productsId
					}).then(response => {
						console.log(response);
						this.getCllect(); // 点击收藏之后要更新收藏的数据信息
						if(response.code == '200') {
							this.isCollect = true;
							uni.showToast({
								title: '收藏成功'
							})
						}
					})
				} else {
					// 表示点击了取消收藏
					request.DELETE(`/system/collect/${this.collectInfo.advCollect}`, null).then(response => {
						console.log(response);
						if(response.code == '200') {
							this.isCollect = false;
							this.collectInfo = {};
							uni.showToast({
								title: '取消收藏成功'
							})
						}
					})
				}
			},
			// 获取产品信息
			getProductInfo() {
				this.isLoading = true;
				this.loadingTitle = '加载中...';
				request.GET(`/system/products/${this.productsId}`, null).then(response => {
					console.log(response)
					this.info = response.data;
					if(this.info.length == 0) {
						this.loadingTitle = '暂无内容';
					} else {
						this.isLoading = false;
					}
				})
			},
			// 去订单页面
			goOrder(type) {
				if(!this.userInfo.advMembersId) {
					console.log(this.userInfo);
					uni.showModal({
						content: '请先登录',
						success: (res) => {
							if(res.confirm) {
								uni.navigateTo({
									url: '/pages/my/login/login'
								})
							}
						}
					})
					return;
				}
				/**
				 * type: 跳转的类型
				 * 		1: 结算
				 * 		2: 购买
				 * 		   a. 点击购买的时候, 需要生成一个订单, 并且添加一条订单清单到表中
				 * id: 产品的id
				 * nums: 购买的数量
				 */
				if(type == '2') {
					// 如果当前购买的产品是内容产品, 需要判断是否已经购买过这个内容
					if(this.info.productType == 2) {
						GET_USER_INFO().then(response => {
							this.info.advMembersId = response.advMembersId;
							this.info.ordersNum = this.nums;
							request.GET(`/system/products/isbuy/${response.advMembersId}/${this.info.advProductsId}`, null)
								   .then(response => {
									   console.log(response)
									   if(response.data == 1) {
										   uni.showModal({
										   	content: '你已经购买过这个商品了, 请勿重复购买'
										   })
									   } else {
										   request.POST('/system/orders/app', this.info).then(response => {
										   	uni.navigateTo({
										   		url: `/pages/product/order/order?type=${this.info.productType}`
										   	})
										   }).catch(error => {
										   	console.log(error);
										   }) 
									   }
								   })
						})
					} else {
						GET_USER_INFO().then(response => {
							this.info.advMembersId = response.advMembersId;
							this.info.ordersNum = this.nums;
							request.POST('/system/orders/app', this.info).then(response => {
								uni.navigateTo({
									url: `/pages/product/order/order?type=${this.info.productType}`
								})
							}).catch(error => {
								console.log(error);
							}) 
						})
					}
				} 
				if(type == '1') {
					uni.navigateTo({
						url: `/pages/product/order/order?type=${this.info.productType}`
					})
				}
			},
			// 数量改变
			changeValue(value) {
				this.nums = value
				console.log(value)
			}
		}
	}
</script>

<style lang="less">
.product-details {
	width: 750rpx;
	height: 100vh;
	box-sizing: border-box;
	overflow: auto;
}
.nothing {
	width: 750rpx;
	height: 80px;
}
.bottom {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 750rpx;
	height: 70px;
	box-shadow: 0 0 10px 0 #eee;
	background-color: rgba(255, 255, 255, .2);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	z-index: 999;
	.buy-button {
		width: 300rpx;
		height: 40px;
		border-radius: 20px;
		background-color: orangered;
		text-align: center;
		line-height: 40px;
		color: white;
		margin-bottom: 10px;
		&:active {
			background-color: coral;
		}
	}
}
</style>
